<template>
  <div class="vote_main" :class="{'pad0':status==3}">
    <head-top head-title="事务投票" goBack="true"></head-top>
    <div v-if="status == 3">
      <div style="width: 100%;height: 10px;background: #f2f2f2;"></div>
      <div class="vote_root">
        <div class="vote_content border-bottom">
          <p>{{voteList.content}}</p>
          <span>查看详细内容</span>
          <img @click="$router.push('/home/VillageDetail/'+voteList.article_id)" src="./images/alreadycast@2x.png"
               alt="">
        </div>
        <div class="vote-wrapper">
          <div class="candidate border-bottom-last" v-for="(vote,indexs) in voteList.list" :key="indexs">
            <div class="introduce">
              <div class="img_people">
                <img :src="vote.img_moblie_url" alt="">
              </div>
              <div class="content_word">
                <div class="word_top">
                  <p>{{vote.options}}</p>
                  <span>{{vote.start_time * 1000 | dateFmt(('YYYY.MM.DD HH:mm:ss'))}}</span>
                </div>
                <div class="word_bottom">
                  <p>{{vote.sup_content}}</p>
                  <span @click="toVoteDetail(vote.sup_id)">查看详细内容</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rootbtn" @click="goRoot">
          <button>
            <span>查看票根</span>
          </button>
        </div>
      </div>
    </div>
    <!--查看投票后的票根end-->
    <p v-if="status==4 && s_status!==1 && s_status!==2"
       style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">
      投票未开启或投票已下架</p>
    <p v-if="status==2 || s_status == 2" style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">
      对不起您不是该小区业主，或者去我的房申请进行审核</p>
    <p v-if="status==5 && s_status !== 1 && s_status!==2"
       style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">
      您未绑定手机和真实姓名</p>
    <p v-if="status==6 && s_status !== 1 && s_status!==2"
       style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">
      对不起，该项投票已由同套房屋的其他业主完成</p>
    <div class="notices" v-html="content" v-if="status == 1"></div>
    <div class="detail" @click="$router.push('/home/VillageDetail/'+contentId)" v-if="status == 1">查看详情</div>
    <form action="" v-if="status == 1">
      <!--单选-->
      <div class="candidate-wrapper">
        <div class="candidate border-bottom-last" v-for="(item,index) in lists" :key="index">
          <div class="introduce">
            <div class="img_people">
              <img :src="item.img_moblie_url" alt="">
            </div>
            <div class="content_word">
              <div class="word_top">
                <p>{{item.title}}</p>
                <span>{{item.created_at * 1000 | dateFmt(('YYYY.MM.DD HH:mm:ss'))}}</span>
              </div>
              <div class="word_bottom">
                <p>{{item.options}}</p>
                <span @click="toVoteDetail(item.article_id)">查看详细内容</span>
              </div>
            </div>
          </div>
          <div class="answer">
            <label v-show="agreeShow === 'agree'" :for="`${1}_${item.vote_id}_${item.supplement_id}`">
              <input ref="dis" class="same" type="radio" :name="item.supplement_id"
                     :value="`${1}_${item.vote_id}_${villageId}_${userId}`"
                     :id="`${1}_${item.vote_id}_${item.supplement_id}`">
              <span></span>同意
            </label>
            <label v-show="opposeShow === 'oppose'" :for="`${2}_${item.vote_id}_${item.supplement_id}`">
              <input ref="dis" class="same" type="radio" :name="item.supplement_id"
                     :value="`${2}_${item.vote_id}_${villageId}_${userId}`"
                     :id="`${2}_${item.vote_id}_${item.supplement_id}`">
              <span></span>不同意
            </label>
            <label v-show="mostShow === 'most'" :for="`${3}_${item.vote_id}_${item.supplement_id}`">
              <input ref="dis" class="same" type="radio" :name="item.supplement_id"
                     :value="`${3}_${item.vote_id}_${villageId}_${userId}`"
                     :id="`${3}_${item.vote_id}_${item.supplement_id}`">
              <span></span>随多数
            </label>
            <label v-show="waiverShow === 'waiver'" :for="`${4}_${item.vote_id}_${item.supplement_id}`">
              <input ref="dis" class="same" type="radio" :name="item.supplement_id"
                     :value="`${4}_${item.vote_id}_${villageId}_${userId}`"
                     :id="`${4}_${item.vote_id}_${item.supplement_id}`">
              <span></span>弃权
            </label>
          </div>
        </div>
      </div>
      <!--多选一-->
      <div class="chose_one">
        <div class="candidate-wrapper2" v-for="(cup,index) in supLists">
          <div class="chose_one_title">
            <span>多选一</span>
          </div>
          <div class="candidate border-bottom-last" v-for="(item,cupindex) in cup" :key="cupindex">
            <div class="introduce">
              <div class="img_people">
                <img :src="item.img_moblie_url" alt="">
              </div>
              <div class="content_word">
                <div class="word_top">
                  <p>{{item.title}}</p>
                  <span>{{item.created_at * 1000 | dateFmt(('YYYY.MM.DD HH:mm:ss'))}}</span>
                </div>
                <div class="word_bottom">
                  <p>{{item.options}}</p>
                  <span @click="toVoteDetail(item.article_id)">查看详细内容</span>
                </div>
              </div>
            </div>
            <div class="answer">
              <label v-show="agreeShow === 'agree'" :for="`${1}_${item.vote_id}_${item.supplement_id}`">
                <input ref="dis" @click="choseInput(index,$event)" :data_index="index"
                       :data_choseseme="`${index}_${1}_${item.supplement_id}`" class="chosesame" type="radio"
                       :name="item.supplement_id"
                       :value="`${1}_${item.vote_id}_${villageId}_${userId}`"
                       :id="`${1}_${item.vote_id}_${item.supplement_id}`">
                <span></span>同意
              </label>
              <label v-show="opposeShow === 'oppose'" :for="`${2}_${item.vote_id}_${item.supplement_id}`">
                <input ref="dis" @click="choseInput(index,$event)" :data_index="index"
                       :data_choseseme="`${index}_${2}_${item.supplement_id}`" class="chosesame" type="radio"
                       :name="item.supplement_id"
                       :value="`${2}_${item.vote_id}_${villageId}_${userId}`"
                       :id="`${2}_${item.vote_id}_${item.supplement_id}`">
                <span></span>不同意
              </label>
              <label v-show="mostShow === 'most'" :for="`${3}_${item.vote_id}_${item.supplement_id}`">
                <input ref="dis" @click="choseInput(index,$event)" :data_index="index"
                       :data_choseseme="`${index}_${3}_${item.supplement_id}`" class="chosesame" type="radio"
                       :name="item.supplement_id"
                       :value="`${3}_${item.vote_id}_${villageId}_${userId}`"
                       :id="`${3}_${item.vote_id}_${item.supplement_id}`">
                <span></span>随多数
              </label>
              <label v-show="waiverShow === 'waiver'" :for="`${4}_${item.vote_id}_${item.supplement_id}`">
                <input ref="dis" @click="choseInput(index,$event)" :data_index="index"
                       :data_choseseme="`${index}_${4}_${item.supplement_id}`" class="chosesame" type="radio"
                       :name="item.supplement_id"
                       :value="`${4}_${item.vote_id}_${villageId}_${userId}`"
                       :id="`${4}_${item.vote_id}_${item.supplement_id}`">
                <span></span>弃权
              </label>
            </div>
          </div>
        </div>
      </div>
    </form>
    <div class="confirmbtn">
      <button @click="submit" v-show="status==1">
        <span>确认</span>
      </button>
    </div>

    <!--弹窗-->
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade" :closeOnClickModal="false" class="popup-wrapper">
      <div class="popup">
        <p class="tishi">提示</p>
        <p class="desc">事项多选一只能同意一项</p>
        <div class="sure-reset">
          <span class="reset clearfix" @click="reset">确认选择</span>
          <!--<span class="sure clearfix" @click="sureChsose">确认选择</span>-->
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<style lang="scss" scoped>
  /*@import "../../common/sass/index.scss";*/
  @import "../../common/sass/mixin.scss";

  .mint-indicator-mask {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000;
    z-index: 667;
  }

  .vote_main {
    width: 100%;
    padding-top: 40px;
    padding-bottom: 10%;
    -webkit-overflow-scrolling: touch;
    /*满意度部分样式*/
    .pleased {
      padding: 10px;
      .introduces {
        width: 100%;
        /*height: 70px;*/
        .pcontent_word {
          float: left;
          width: 100%;
          margin-left: 5px;
          position: relative;
          .word_top {
            margin-top: 10px;
            height: 22px;
            p {
              font-size: 15px;
              float: left;
              width: 168px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            span {
              float: right;
              font-size: 10px;
              color: #666;
              margin-right: 6px;
            }
          }
          .word_bottom {
            height: 22px;
            line-height: 22px;
            p {
              font-size: 13px;
              float: left;
              color: #666666;
              width: 180px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            span {
              float: right;
              font-size: 12px;
              color: #0078de;
              margin-right: 6px;
            }
          }
          img {
            width: 90px;
            position: absolute;
            right: 10px;
            top: 0;
          }
        }
      }
      .joinbtn {
        text-align: center;
        button {
          width: 100%;
          background: #0078de;
          outline: none;
          margin-top: 10px;
          span {
            line-height: 40px;
            font-size: 15px;
            color: #fff;
          }
        }
      }
      .joinbtn2 {
        text-align: center;
        button {
          width: 100%;
          background: #0078de;
          outline: none;
          margin-top: 10px;
          span {
            line-height: 40px;
            font-size: 15px;
            color: #fff;
          }
        }
      }
    }
    /*事物投票查看票根样式*/
    .vote_root {
      padding: 10px;
      width: 93%;
      .vote_content {
        width: 100%;
        height: 75px;
        position: relative;
        p {
          font-size: 14px;
          float: left;
          color: #545454;
          /*overflow: hidden;*/
          /*text-overflow: ellipsis;*/
          /*white-space: nowrap;*/
          @include ellipsis(2);
          line-height: 24px;
        }
        span {
          float: right;
          font-size: 14px;
          color: #0078de;
          /*margin-right: 5px;*/
          margin-top: 10px;
        }
        img {
          position: absolute;
          right: 0;
          width: 90px;
        }
      }
      .vote-wrapper {
        .candidate {
          width: 100%;
          height: 80px;
          .introduce {
            width: 100%;
            height: 70px;
            margin-top: 10px;
            .img_people {
              padding-top: 10px;
              padding-left: 10px;
              float: left;
              width: 14%;
              img {
                width: 44px;
                height: 44px;
                border-radius: 50%;
              }
            }
            .content_word {
              float: left;
              width: 80%;
              .word_top {
                margin-top: 10px;
                height: 22px;
                p {
                  font-size: 15px;
                  float: left;
                  width: 168px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  float: right;
                  font-size: 10px;
                  color: #666;
                  /*margin-right: 5px;*/
                }
              }
              .word_bottom {
                height: 22px;
                line-height: 22px;
                p {
                  font-size: 12px;
                  float: left;
                  color: #666666;
                  width: 180px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  float: right;
                  font-size: 12px;
                  color: #0078de;
                  /*margin-right: 5px;*/
                }
              }
            }
          }
          .answer {
            // display: flex;
            width: 100%;
            text-align: center;
            font-size: 16px;
            label {
              width: 25%;
              float: left;
            }
            .same {
              display: none;
            }
            span {
              position: relative;
              background-color: #fff;
              border: 1px solid rgba(0, 0, 0, 0.15);
              border-radius: 100%;
              display: inline-block;
              height: 16px;
              margin-right: 4px;
              // margin-top: -1px;
              vertical-align: middle;
              width: 16px;
              line-height: 1;
            }
            .same:checked + span:after {
              position: absolute;
              top: 3px;
              left: 3px;
              background-color: #0078de;
              border-radius: 100%;
              content: "";
              display: inline-block;
              height: 10px;
              width: 10px;
            }
            .same:checked:after {
              border-radius: 0;
            }
          }
        }
      }
      .rootbtn {
        text-align: center;
        button {
          width: 100%;
          background: #0078de;
          outline: none;
          margin-top: 10px;
          span {
            line-height: 40px;
            font-size: 15px;
            color: #fff;
          }
        }
      }
    }
    .notices {
      padding: 10px 10px 0 10px;
      box-sizing: border-box;
      height: auto;
      line-height: 18px;
      background-color: #f2f2f2;
      font-size: 16px;
    }
    .detail {
      padding: 0 10px 10px 10px;
      box-sizing: border-box;
      background-color: #f2f2f2;
      text-align: right;
      color: #0078de;
    }
    .candidate-wrapper {
      .candidate {
        width: 100%;
        height: 112px;
        .introduce {
          width: 100%;
          height: 70px;
          margin-top: 10px;
          .img_people {
            padding-top: 10px;
            padding-left: 10px;
            float: left;
            width: 14%;
            img {
              width: 44px;
              height: 44px;
              border-radius: 50%;
            }
          }
          .content_word {
            float: left;
            width: 80%;
            .word_top {
              margin-top: 10px;
              height: 22px;
              p {
                font-size: 15px;
                float: left;
                width: 170px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              span {
                float: right;
                font-size: 10px;
                color: #666;
                /*margin-right: 5px;*/
              }
            }
            .word_bottom {
              height: 22px;
              line-height: 22px;
              p {
                font-size: 12px;
                float: left;
                color: #666666;
                width: 180px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              span {
                float: right;
                font-size: 12px;
                color: #0078de;
                /*margin-right: 5px;*/
              }
            }
          }
        }
        .answer {
          // display: flex;
          width: 100%;
          text-align: center;
          font-size: 16px;
          label {
            width: 25%;
            float: left;
          }
          .same {
            display: none;
          }
          span {
            position: relative;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 100%;
            display: inline-block;
            height: 16px;
            margin-right: 4px;
            // margin-top: -1px;
            vertical-align: middle;
            width: 16px;
            line-height: 1;
          }
          .same:checked + span:after {
            position: absolute;
            top: 3px;
            left: 3px;
            background-color: #0078de;
            border-radius: 100%;
            content: "";
            display: inline-block;
            height: 10px;
            width: 10px;
          }
          .same:checked:after {
            border-radius: 0;
          }
        }
      }
    }
    .chose_one {
      .candidate-wrapper2 {
        .chose_one_title {
          width: 100%;
          height: 40px;
          background: #f2f2f2;
          span {
            font-size: 14px;
            line-height: 40px;
            color: #666666;
            padding-left: 10px;
          }
        }
        .candidate {
          width: 100%;
          height: 112px;
          .introduce {
            width: 100%;
            height: 70px;
            margin-top: 10px;
            .img_people {
              padding-top: 10px;
              padding-left: 10px;
              float: left;
              width: 14%;
              img {
                width: 44px;
                height: 44px;
                border-radius: 50%;
              }
            }
            .content_word {
              float: left;
              width: 80%;
              .word_top {
                margin-top: 10px;
                height: 22px;
                p {
                  font-size: 15px;
                  float: left;
                  width: 170px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  float: right;
                  font-size: 10px;
                  color: #666;
                  /*margin-right: 5px;*/
                }
              }
              .word_bottom {
                height: 22px;
                line-height: 22px;
                p {
                  font-size: 12px;
                  float: left;
                  color: #666666;
                  width: 180px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  float: right;
                  font-size: 12px;
                  color: #0078de;
                  /*margin-right: 5px;*/
                }
              }
            }
          }
          .answer {
            // display: flex;
            width: 100%;
            text-align: center;
            font-size: 16px;
            label {
              width: 25%;
              float: left;
            }
            .chosesame {
              display: none;
            }
            span {
              position: relative;
              background-color: #fff;
              border: 1px solid rgba(0, 0, 0, 0.15);
              border-radius: 100%;
              display: inline-block;
              height: 16px;
              margin-right: 4px;
              // margin-top: -1px;
              vertical-align: middle;
              width: 16px;
              line-height: 1;
            }
            .chosesame:checked + span:after {
              position: absolute;
              top: 3px;
              left: 3px;
              background-color: #0078de;
              border-radius: 100%;
              content: "";
              display: inline-block;
              height: 10px;
              width: 10px;
            }
            .chosesame:checked:after {
              border-radius: 0;
            }
          }
        }
      }
    }

    .confirmbtn {
      width: 100%;
      height: 44px;
      text-align: center;
      position: fixed;
      z-index: 2;
      bottom: 0;
      button {
        width: 100%;
        height: 44px;
        background: #0078de;
        outline: none;
        border-radius: 0;
        span {
          font-size: 15px;
          color: #fff;
        }
      }
      .pad0 {
        padding-top: 40px;
        padding-bottom: 0;
      }
    }
    .popup-wrapper {
      width: 70%;
      height: 28%;
      border-radius: 15px;
      .popup {
        padding: 10px 0;
        p {
          text-align: center;
        }
        .tishi {
          margin-bottom: 20px;
          font-size: 18px;
          font-weight: 700;
        }
        .desc-bottom {
          font-size: 15px;
          color: #666;
          padding: 0 10px 23px 10px;
          line-height: 16px;
        }
        .desc {
          font-size: 15px;
          color: #666;
        }
        .sure-reset {
          width: 100%;
          font-size: 16px;
          position: absolute;
          bottom: 0;
          left: 0;
          border-top: 1px solid #f0f0f0;
          .reset {
            padding: 10px 0;
            display: inline-block;
            text-align: center;
            width: 100%;
            color: #666;
            /*border-right: 1px solid #f0f0f0;*/
          }
          /*.sure {*/
          /*text-align: center;*/
          /*width: 49%;*/
          /*padding: 10px 0;*/
          /*float: right;*/
          /*color: #0078de;*/
          /*}*/
        }
      }
    }
  }

</style>
<script>
  import headTop from '../header/Header.vue'
  import { loadVillageId, loadUserId } from '../../common/js/cache.js'
  import commonUrl from '../../common/js/commonUrl.js'
  import qs from 'qs'
  import $ from 'jquery'
  import { Toast, Indicator } from 'mint-ui'
  import { getsVoteList } from '../../api/satisfaction'

  export default {
    name: 'Vote',
    data () {
      return {
        lists: [],
        supLists: [],
        agree: 0,
        data: [],
        popupVisible: false,
        userId: loadUserId(),
        mask: false,
        tishi: '',
        status: {
          type: Number
        },
        s_status: {
          type: Number
        },
        villageId: loadVillageId(),
        content: '',
        contentId: '',
        agreeShow: '', // 投票选项显示  同意
        opposeShow: '', // 反对
        waiverShow: '', // 弃权
        mostShow: '', // 随多数
        voteList: {} // 票根内容
      }
    },
    components: {
      headTop
    },
    created () {
      this._getVoteList()
    },
    methods: {
      toVoteDetail (id) {
        this.$router.push('/home/VillageDetail/' + id)
      },
      _getVoteList () {
        getsVoteList(this.$route.params.id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.status = res.data.status
            if (this.status === 1) {
              // 单选项数据
              this.lists = res.data.supDetail
              // console.log(this.lists)
              // 多选项数据
              this.supLists = res.data.supDetailSelect
              // console.log(this.supLists)
              this.content = res.data.content
              // console.log(this.content)
              this.contentId = res.data.content_id
              // 选项显示
              this.agreeShow = res.data.voteType.agree
              this.opposeShow = res.data.voteType.oppose
              this.waiverShow = res.data.voteType.waiver
              this.mostShow = res.data.voteType.most
            }
            if (this.status === 3) {
              this.tishi = res.data.png_url
              this.voteList = res.data.voteDetail
              // console.log(this.voteList)
            }
          }
        })
      },
      // 多选一的点击
      choseInput (index, event) {
        var a = 0 // 变量用于存放判断弹窗
        var v = event.target.id
        // console.log(v)
        var sid = v.split('_')[2]
        // console.log(sid)
        v = v.split('_')[0]
        // console.log($('input[data_index=' + index + ']:checked').val())
        $('input[data_index=' + index + ']').each(function () {
          if (this.checked) {
            if (this.value.split('_')[0] === '1') {
              a++
            }
            if (a > 1) {
              $('input[data_choseseme=' + index + '_' + v + '_' + sid + ']').prop('checked', false)
              return
            }
          }
        })
        if (a > 1) {
          this.popupVisible = true
          return
        }
      },
      // 二选一弹窗的重新选择
      reset () {
        this.popupVisible = false
      },
      submit () {
        // console.log(this.supLists)
        // 提交的时候再次判断多选一只能选一个同意
        var i = 0
        var j = 0
        for (i; i < 2; i++) {
          $('input[data_index=' + i + ']').each(function () {
            if (this.checked) {
              if (this.value.split('_')[0] === '1') {
                j++
              }
              if (j > 1) {
                $('input[data_index=' + i + ']').prop('checked', false)
                return
              }
            }
          })
          if (j > 1) {
            break
          }
          j = 0
        }
        // 提示信息
        if (j > 1) {
          this.popupVisible = true
          return
        }
        var supArray = this.supLists
        var newArray = []
        for (const key in supArray) {
          newArray.push(...supArray[key])
        }
        // console.log(newArray)
        const url = `${commonUrl.apihost}index.php/home/Vote_Result/setSupplement`
        // 获取form表单中的值
        var dataStr = $('form').serialize()
        // 字符串拼接成后台想要的数据
        var dataArr = dataStr.split('=').join('_').split('&')
        var data = []
        dataArr.forEach((item, index) => {
          data.push(item.split('_'))
        })
        if (data.length !== (this.lists.length + newArray.length)) {
          Toast({
            message: '还有投票未投',
            position: 'middle',
            duration: 1500
          })
          return
        }
        Indicator.open({
          text: '投票中...',
          spinnerType: 'fading-circle'
        })
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            Indicator.close()
            // flag 1:表示跳转 0：表示不跳转
            if (res.data.data.flag === 1) {
              if (res.data.data.data.type === 'vote') {
                this.$router.replace('/home/Vote/' + res.data.data.data.id)
                this.$router.go(0) // 刷新
                this._getVoteList()
              } else if (res.data.data.data.type === 'voting') {
                this.$router.replace('/home/voting/' + res.data.data.data.id)
              } else if (res.data.data.data.type === 'TakeIn') {
                this.$router.replace('/home/TakeIn/' + res.data.data.data.id)
              }
            } else if (res.data.data.flag === 0) {
              // this.$router.back()
              // this.$router.go(-6)
              this.$router.replace('/home')
            }
            Toast({
              message: res.data.data.message,
              position: 'middle',
              duration: 1000
            })
          }
          if (res.data.code === 400) {
            Indicator.close()
            this.$router.go(0)
          }
        })
      },
      // 事物投票查看票根
      goRoot () {
        this.$router.push({name: 'TicketRoot', params: {url: this.tishi}})
      }
    }
  }
</script>
